<template>
  <div>
    <van-nav-bar title="户外跑步" left-arrow @click-left="onClickLeft">
      <van-nav-bar left-arrow @click-left="onClickLeft" size="18px" color="#000"/>
      <van-icon name="wap-nav" slot="right" size="18px" color="#000" @click="too()"/>
    </van-nav-bar>

    <van-swipe :autoplay="3000" :width='375'>
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" style="width:100%;height:100%">
       
      </van-swipe-item>
    </van-swipe>
    <div>
      <p class="time">
        <span>
          --
          <a>Min/Km</a>
        </span>
        <span>{{time}}<a>Time</a></span>
        <span>
          0
          <a>KaCal</a>
        </span>
      </p>
    </div>
    <div class="foot">
       <p class="de"> <van-icon name="location-o" size="20px" /></p>
        <p class="star"  @click="timet()"> <span style="font-weight:600">Go</span><span >开始</span></p>


    </div>


  </div>
</template>

<script>
export default {
  name: "Runing",
  data() {
    return {
      time: "00:00:00",
      timer:0,
     fals:false,
      images: [
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2368676460,279075092&fm=27&gp=0.jpg",
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2368676460,279075092&fm=27&gp=0.jpg",
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2368676460,279075092&fm=27&gp=0.jpg",
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2368676460,279075092&fm=27&gp=0.jpg"
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    too(){
      this.$router.push('/run-setting')

    },
    timet() {
       this.fals=!this.fals
      //  this.faas = this.faas+1;
       var _this=this
      if (_this.fals==true) {
          console.log('y')
        var ti = setInterval(function(){
          _this.timer=_this.timer+1;
          
          let h = parseInt(_this.timer / 60 / 60);
          let m = parseInt((_this.timer / 60) % 60);
          let f = parseInt(_this.timer % 60);
          h = h < 10 ? "0" + h : h;
          m = m < 10 ? "0" + m : m;
          f = f < 10 ? "0" + f : f;
          _this.time=h+':'+m+':'+f;
          console.log(ti)

        }, 1000);
      } 
      else {
          console.log('n');
          console.log(ti)
        clearInterval(ti);
        _this.time='00:00:00'
      }
    }
  }
};
</script>

<style scoped>
body{
  background:#ccc
}
.time{
    display: flex;
    justify-content:space-around


}
.time span{
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    text-align: center;
    line-height: 30px;


}
.foot .star{
    width: 70px;
    height: 70px;
    border:1px solid #000;
    border-radius: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:20px 0 0 150px ;
    background: white


}
.de{
  width:40px;
  height: 40px;
  border:1px solid #000;
  border-radius: 50%;
  line-height: 40px;
  margin-left:165px ;
  margin-top:80px;
   background: white

}
.foot{
  display: flex;
 text-align: center;
  flex-direction: column;
  justify-content:space-around;
 

}

.foot p{
  display: inline-block;
  text-align: center
}
</style>
